<!--
 * @Author: 236180300 236180300@qq.com
 * @Date: 2024-01-17 14:48:26
 * @LastEditors: 236180300 236180300@qq.com
 * @LastEditTime: 2024-01-17 14:52:38
 * @FilePath: \Admin\src\views\wi\StatusMonitor\StatusMonitor.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="page-main StatusMonitor">
        <DataTable ref="StatusMonitorDataTableRef" :data="list" :hasAdd="false" :hasFilter="true" :hasCheckbox="false" :page-index="pageInfo.pageIndex" :page-size="pageInfo.pageSize" :total-count="pageInfo.totalCount" @page-change="onPageChange" @search-filter="onSearchFilter" @clear-filter="onClearFilter" @show-detail="onShowDetail" v-bind="$attrs">
            <vxe-column title="钢丝绳名称" min-width="150" show-overflow>
                <template #default="{ row }">
                    {{ row.name || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="规格型号" min-width="150" show-overflow>
                <template #default="{ row }">
                    {{ row.guiGe || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="直径" min-width="120" show-overflow>
                <template #default="{ row }"> {{ row.diameter || "-" }}mm </template>
            </vxe-column>

            <vxe-column title="公称捻距" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.nianJu || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="安全运行时长" min-width="120" show-overflow>
                <template #default="{ row }"> {{ computedDay(row.installDate) }}天 </template>
            </vxe-column>

            <vxe-column title="安装长度" min-width="120" show-overflow>
                <template #default="{ row }"> {{ row.installLengthNum || "-" }}m </template>
            </vxe-column>

            <vxe-column title="绳子条数" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.cnt || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="提升用途" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.hoisterUsageName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="钢丝绳类型" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.wireropeTypeName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="提升机类型" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.hoisterName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="安装日期" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ Gx.YMD(row.installDate) }}
                </template>
            </vxe-column>

            <vxe-column title="主要负责人" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.linkUser || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="负责人电话" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.linkPhone || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="矿山" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.department_Name || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="备注" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.remark || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="供应商" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.supplierName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="制造商" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.producerName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="抗拉强度" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.mpaName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="表面状态" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.surfaceStatusName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="捻制类型" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.twistingTypeName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="钢丝绳编码" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.code || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="LA状态" min-width="100" fixed="right">
                <template #default="{ row }">
                    <span class="iconfont icon-gangsishengbaojing" :class="Enums.Light_Type.Get(row.checkWireropeStatusMonitorModel?.la).color"></span>
                </template>
            </vxe-column>

            <vxe-column title="DIA状态" min-width="100" fixed="right">
                <template #default="{ row }">
                    <span class="iconfont icon-gangsishengbaojing" :class="Enums.Light_Type.Get(row.checkWireropeStatusMonitorModel?.dia).color"></span>
                </template>
            </vxe-column>

            <vxe-column title="LMA状态" min-width="100" fixed="right">
                <template #default="{ row }">
                    <span class="iconfont icon-gangsishengbaojing" :class="Enums.Light_Type.Get(row.checkWireropeStatusMonitorModel?.lma).color"></span>
                </template>
            </vxe-column>

            <vxe-column title="LL状态" min-width="100" fixed="right">
                <template #default="{ row }">
                    <span class="iconfont icon-gangsishengbaojing" :class="Enums.Light_Type.Get(row.checkWireropeStatusMonitorModel?.nianJu).color"></span>
                </template>
            </vxe-column>

            <vxe-column title="综合状态" min-width="100" fixed="right">
                <template #default="{ row }">
                    <span class="iconfont icon-gangsishengbaojing" :class="Enums.Light_Type.Get(row.checkWireropeStatusMonitorModel?.summary).color"></span>
                </template>
            </vxe-column>

            <vxe-column title="操作" min-width="310" fixed="right">
                <template #default="{ row }">
                    <el-button :disabled="row.isDelete" type="primary" v-if="row.hasCheck" @click="onShowDetail(row)">详情</el-button>
                    <el-button :disabled="row.isDelete" type="primary" v-if="row.hasCheck" @click="onShowVideo(row)">实时监控</el-button>
                    <el-button :disabled="row.isDelete" type="warning" v-if="row.hasCheck" @click="onShowHistory(row)">历史曲线</el-button>
                </template>
            </vxe-column>

            <!-- 在添加按钮后面的搜索条件 -->
            <template #otherFilter>
                <el-input class="placeholder-center" v-model="filterModel._Name" placeholder="钢丝绳名称" clearable></el-input>
                <el-input class="placeholder-center" v-model="filterModel._GuiGe" placeholder="规格型号" clearable></el-input>
                <DataSelect table="Hoister" label="name" value="name" :distinct="true" placeholder="提升机类型" v-model:id="filterModel._HoisterNames" multiple collapse-tags></DataSelect>
                <DataSelect table="Department" placeholder="请选择矿山" :filter="{ _Type: Enums.Department_Type.矿山 }" v-model:id="filterModel._DepartmentIDs" multiple collapse-tags></DataSelect>
            </template>

            <!-- 在搜索按钮后面的按钮 -->
            <template #otherBtn></template>

            <template #rightBtn>
                <div style="display: flex">
                    <span class="iconfont icon-gangsishengbaojing" :class="Enums.Light_Type.Get(1).color"></span>
                    <span style="font-size: 20px" class="marr-15">轻度</span>
                    <span class="iconfont icon-gangsishengbaojing" :class="Enums.Light_Type.Get(2).color"></span>
                    <span style="font-size: 20px" class="marr-15">中度</span>
                    <span class="iconfont icon-gangsishengbaojing" :class="Enums.Light_Type.Get(3).color"></span>
                    <span style="font-size: 20px" class="marr-15">重度</span>
                    <span class="iconfont icon-gangsishengbaojing" :class="Enums.Light_Type.Get(4).color"></span>
                    <span style="font-size: 20px" class="marr-15">严重</span>
                    <span class="iconfont icon-gangsishengbaojing" :class="Enums.Light_Type.Get(5).color"></span>
                    <span style="font-size: 20px" class="marr-15">报废</span>
                </div>
            </template>

            <!-- 高级搜索内容 -->
            <template #Advfilter>
                <el-form v-model="filterModel" label-position="top" @submit.prevent>
                    <el-form-item label="LA状态" prop="_La">
                        <EnumSelect class="w-100" :enums="Enums.Light_Type" placeholder="请选择LA状态" v-model:id="filterModel._La" multiple collapse-tags></EnumSelect>
                    </el-form-item>
                    <el-form-item label="DIA状态" prop="_Dia">
                        <EnumSelect class="w-100" :enums="Enums.Light_Type" placeholder="请选择DIA状态" v-model:id="filterModel._Dia" multiple collapse-tags></EnumSelect>
                    </el-form-item>
                    <el-form-item label="LMA状态" prop="_Lma">
                        <EnumSelect class="w-100" :enums="Enums.Light_Type" placeholder="请选择LMA状态" v-model:id="filterModel._Lma" multiple collapse-tags></EnumSelect>
                    </el-form-item>
                    <el-form-item label="LL状态" prop="_NianJu">
                        <EnumSelect class="w-100" :enums="Enums.Light_Type" placeholder="请选择LL状态" v-model:id="filterModel._NianJu" multiple collapse-tags></EnumSelect>
                    </el-form-item>
                    <el-form-item label="综合状态" prop="_ZongHe">
                        <EnumSelect class="w-100" :enums="Enums.Light_Type" placeholder="请选择综合状态" v-model:id="filterModel._ZongHe" multiple collapse-tags></EnumSelect>
                    </el-form-item>
                </el-form>
            </template>
        </DataTable>

        <!-- 详情 -->
        <StatusMonitorDetail ref="StatusMonitorDetailRef" v-if="isShowDetail" @close="onCloseDetail"></StatusMonitorDetail>
        <StatusMonitorHistory ref="StatusMonitorHistoryRef" v-if="isShowHistory" @close="onCloseDetail"></StatusMonitorHistory>
        <Video ref="VideoRef" v-if="showVideo" @close="onCloseDetail" :url="videoUrl"></Video>
    </div>
</template>

<script lang="ts" setup>
import { DatePart } from "@/_gx/TsEnums";
import Enums from "@/gx/Enums";
import Gx from "@/gx/Gx";
import StatusMonitorDetail from "./StatusMonitorDetail.vue";
import StatusMonitorHistory from "./StatusMonitorHistory.vue";

import Video from "./Video.vue";

import { useRoute } from "vue-router";
/********************************************** 列表相关定义 **********************************************/

let depart = null;
let zonghe = null;
let queryItem = Gx.GetSession("queryItem");
if (!Gx.IsEmpty(queryItem)) {
    depart = queryItem.depart;
    zonghe = queryItem.zonghe;
    Gx.RemoveSession("queryItem");
}

//表格的数据
const list = ref([]);

//分页信息
const pageInfo = reactive({
    pageIndex: 1,
    pageSize: 20,
    totalCount: 0,
    orderBy: "[x].[UsingWireropeID] DESC",
});

//搜索条件
const filterModel = ref<any>({});

//搜索条件空对象的json字符串，用于清空搜索条件时使用
const filterModelJson = Gx.SerializeObject(filterModel.value);

/********************************************** 列表方法与事件 **********************************************/

//页面加载
onMounted(() => {
    if (depart != null && depart != "") {
        filterModel.value._DepartmentIDs = [parseInt(String(depart))];
    }
    if (zonghe != null && zonghe != "") {
        filterModel.value._ZongHe = [parseInt(String(zonghe))];
    }
    Init();
});

//初始化
const Init = () => {
    GetPage();
};

//分页方法
const GetPage = () => {
    let _data = {};
    MergeObjs(_data, filterModel.value);

    App.CallApi(Api.UsingWirerope.GetStatusMonitorPage(pageInfo.pageIndex, pageInfo.pageSize, pageInfo.orderBy), {
        data: _data,
        success: (res: any) => {
            list.value = res.items;
            pageInfo.totalCount = res.totalCount;
        },
    });
};

//分页改变
const onPageChange = (data: any) => {
    pageInfo.pageIndex = data.currentPage;
    pageInfo.pageSize = data.pageSize;
    GetPage();
};

//计算安全运行时长
const computedDay = (startDate: string | Date) => {
    let dayNum = Gx.DateDiff(DatePart.Day, startDate, Gx.GetDateTime());
    return dayNum;
};

//高级搜索点击搜索按钮
const onSearchFilter = () => {
    pageInfo.pageIndex = 1;
    GetPage();
};

//高级搜索点击清空按钮
const onClearFilter = () => {
    filterModel.value = Gx.DeserializeObject(filterModelJson);
    pageInfo.pageIndex = 1;
    GetPage();
};

/********************************************** 详情页相关 **********************************************/

//是否显示详情对话框
const isShowDetail = ref(false);
const isShowHistory = ref(false);
//详情对话框Ref对象
const StatusMonitorDetailRef = ref(null);
const StatusMonitorHistoryRef = ref(null);

//显示详情
const onShowDetail = (row) => {
    isShowDetail.value = true;
    nextTick(() => {
        StatusMonitorDetailRef.value.Init(row.autoID);
    });
};
const onShowHistory = (row) => {
    isShowHistory.value = true;
    nextTick(() => {
        StatusMonitorHistoryRef.value.Init(row.autoID);
    });
};

//关闭详情
const onCloseDetail = (isRefresh: boolean) => {
    if (isRefresh) {
        GetPage();
    }

    isShowDetail.value = false;
    isShowHistory.value = false;
    showVideo.value = false;
};

const videoUrl = ref("");
const showVideo = ref(false);
const onShowVideo = (row) => {
    videoUrl.value = row.videoUrl;
    showVideo.value = true;
};
</script>

<style lang="scss" scoped>
.icon-gangsishengbaojing {
    font-size: 32px;
}
.greenLight {
    color: #67c23a;
}
.blueLight {
    color: #409eff;
}
.yellowLight {
    color: #f4ea2a;
}
.orangeLight {
    color: #fea821;
}
.grayLight {
    color: #909399;
}
</style>
